<template>
  <div id="seven-days" />
</template>
<script>
import echarts from 'echarts'
import { getClueAmountTrend } from '@/api/clue'
import resize from '../mixins/resize'
export default {
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async initChart() {
      const res = await getClueAmountTrend()
      this.chart = echarts.init(document.getElementById('seven-days'))
      const xAxis = []
      const data = []
      res.data.forEach((item) => {
        xAxis.push(item.time)
        data.push(item.value)
        // data.push({
        //   value: item.value,
        //   // itemStyle: { color: 'orange' }
        // });
      })
      console.log(data)
      var fontColor = '#AFECFF'
      const option = {
        grid: {
          left: '5',
          right: '15',
          top: '25',
          bottom: '5',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'item'
        },
        visualMap: {
          show: false,
          pieces: [
            {
              gt: 0,
              lte: 10,
              color: '#4CFFC3'
            },
            {
              gt: 10,
              lte: 20,
              color: 'yellow'
            },
            {
              gt: 20,
              lte: 100,
              color: 'red'
            }
          ],
          seriesIndex: 0
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: fontColor
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#397cbc'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#195384'
              }
            },
            data: xAxis
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            // max: 400,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#2ad1d2'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#56BB97'
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#11366e'
              }
            }
          }
        ],
        series: [
          {
            name: '趋势',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,

            // itemStyle: {
            //   normal: {
            //     color: "#4CFFC3",
            //     lineStyle: {
            //       color: "#4CFFC3",
            //       width: 1,
            //     },
            //     areaStyle: {
            //       // color: '#94C9EC'
            //       color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //         {
            //           offset: 0,
            //           color: "rgba(28,96,103,1)",
            //         },
            //         {
            //           offset: 1,
            //           color: "rgba(28,83,88,0.9)",
            //         },
            //       ]),
            //     },
            //   },
            // },
            data: data
          }
        ]
      }
      this.chart.clear() // 清除画布，重新绘制的时候就不会遗留之前的数据，解决高度数据变化echarts高度不变问题
      this.chart.setOption(option) // 重新绘制图标
    }
  }
}
</script>
<style>
#seven-days {
  width: 100%;
  height: 300px;
}
</style>
